<!DOCTYPE html>
<!--suppress HtmlUnknownTag,TypeScriptUMDGlobal,JSUnresolvedFunction -->
<html>
<head>
  <title>vue-plyr-html</title>
  <style>
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

      .demo {
          font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          color: #273849;
          margin: 0 auto;
          padding: 0 2rem;
      }

      .components > div {
          margin: 2rem 0;
      }

      h1 {
          font-size: 3rem;
          margin-bottom: 0;
      }

      h3 {
          margin-top: 0;
          margin-bottom: 2rem;
      }
  </style>
  <link rel="stylesheet" href="./node_modules/vue-plyr/dist/vue-plyr.css">
</head>
<body>
<div id="app">
  <div class="demo">
    <h1>vue-plyr demo.</h1>
    <h3>
      sources can be found at
      <a href="https://github.com/redxtech/vue-plyr/tree/master/examples">
        github.com/redxtech/vue-plyr</a
      >.
    </h3>
    <div class="components">
      <div>
        <h2>video player</h2>
        <vue-plyr :options="options">
          <video
            controls
            crossorigin
            playsinline
            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
          >
            <source
              size="576"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
              type="video/mp4"
            />
            <source
              size="720"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
              type="video/mp4"
            />
            <source
              size="1080"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
              type="video/mp4"
            />
            <track
              default
              kind="captions"
              label="English captions"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
              srclang="en"
            />
            <track
              kind="captions"
              label="Légendes en français"
              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
              srclang="fr"
            />
            <a
              download=""
              href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
            >
              Download
            </a>
          </video>
        </vue-plyr>
      </div>
      <div>
        <h2>audio player</h2>
        <vue-plyr>
          <audio controls crossorigin playsinline>
            <source
              src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
              type="audio/mp3"
            />
            <source
              src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
              type="audio/ogg"
            />
          </audio>
        </vue-plyr>
      </div>
      <div>
        <h2>youtube embed</h2>
        <vue-plyr>
          <div class="plyr__video-embed">
            <iframe
              src="https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
              allowfullscreen
              allowtransparency
              allow="autoplay"
            ></iframe>
          </div>
        </vue-plyr>
      </div>
      <div>
        <h2>youtube (not progressive-enhancement)</h2>
        <vue-plyr>
          <div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
        </vue-plyr>
      </div>
      <div>
        <h2>vimeo embed</h2>
        <vue-plyr>
          <div class="plyr__video-embed">
            <iframe
              src="https://player.vimeo.com/video/143418951?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
              allowfullscreen
              allowtransparency
              allow="autoplay"
            ></iframe>
          </div>
        </vue-plyr>
      </div>
      <div>
        <h2>vimeo (not progressive-enhancement)</h2>
        <vue-plyr>
          <div data-plyr-provider="vimeo" data-plyr-embed-id="143418951"></div>
        </vue-plyr>
      </div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./node_modules/vue-plyr/dist/vue-plyr.min.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        options: { quality: { default: '1080p' } }
      }
    }
  }).use(VuePlyr).mount('#app')
</script>
</body>
</html>
